import React, { Component } from 'react'
import '../assert/css/reg.css';
import Header from '../components/DefaultHeader'

export default class Reg extends Component {
    UNSAFE_componentWillMount(){
        // console.log(this.props);
    }
    state={
        phone:'',
        nickname:'',
        password:''
    }
    reg(){
        const { phone, nickname, password } = this.state
        if(phone ===''){
            alert('手机号不能为空')
        }
        if(nickname ===''){
            alert('账号不能为空')
        }
        if(password ===''){
            alert('密码不能不能为空')
        }
        this.$axios.post('register',{ phone, nickname, password}).then(res=>{
            console.log(res);
            alert('注册成功')
            this.props.history.push("/login")
        })
    }
    render() {
        const { phone, nickname, password } = this.state
        return (
            <div>
                <div className="page-title">会员注册</div>
                <Header title="会员注册" right_text="登录" right_method={()=>this.props.history.push("/login")}/>
                <div className="container">
                    <div className="logo"></div>
                    <div className="form">
                        <div className="form-group">
                            <input type="text" placeholder="手机号" value={phone}  onChange={(e)=>this.setState({phone:e.target.value})} />
                        </div>
                        <div className="form-group">
                            <input type="text" placeholder="昵称" value={nickname}  onChange={(e)=>this.setState({nickname:e.target.value})} />
                        </div>
                        <div className="form-group">
                            <input type="password" placeholder="密码" value={password}  onChange={(e)=>this.setState({password:e.target.value})} />
                        </div>
                        <div className="form-group">
                            <button className="btn-gray" onClick={()=>this.reg()}>注册</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
